<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>室内地图添加标注示例|室内三维地图引擎|易景空间地图</title>
    <meta name="keywords" content="室内地图添加标注示例,室内地图,三维地图引擎,三维地图制作,室内定位,易景空间地图" />
    <meta name="description" content="室内地图添加标注示例,易景室内三维地图引擎提供地图浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内地图显示风格及样式，可自动绘制楼层热力图、散点图等专题地图，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的地图主题资源供二次开发调用。" />
    <link rel="shortcut icon" type="image/ico" href="/esmap/image/favicon.ico">
    <link href="/esmap/css/common.css" rel="stylesheet">
    <style type="text/css">
        .addmarker-floor.btn-floor-vertical {
            position: absolute;
            left: 2%;
            bottom: 5%;
        }

        .modelInfo {
            position: absolute;
            right: 10px;
            bottom: 100px;
            z-index: 999;
        }

        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }

        .panel-default>.panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
        }

        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        .button {
            padding: 7px 11px;
            background-color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 3px;
        }
        .pannel {
            position: absolute;
            left: 2%;
            bottom: 10%;
            z-index: 999;
        }

        .begin {
            background-color: rgb(97, 195, 212);
        }
        .viewmode-group {
            position: absolute;
            right: 12px;
            top: 32%;
            border-radius: 6px;
            border: none;
        }

        .viewmode-group button {
            display: inline-block;
            width: 38px;
            height: 38px;
            border-radius: 4px;
            border: none;
            background-image: url("/esmap/image/wedgets/3D.png");
        }
        .floor_btn{
            position: absolute;
            bottom:50px;
            z-index: 999;
        }
        #get_floor{
            left:100px;
        }
        #change_floor{
            left:234px;
        }
        button{
            padding: 5px 11px;
            background-color: #fff;
            border: none;
            cursor: pointer;
        }
        /* 以下是自定义气泡标注样式 */
        .addmarker-floor.btn-floor-vertical {
            position: absolute;
            left: 10px;
            bottom: 45px;
        }

        #container {
            position: absolute;
            width: 100%;
            top: 40px;
            bottom: 0px;
        }
        #tool-tip {
            position: absolute;
            color: #fff;
            font-size: 18px;
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
            z-index: 2;
            pointer-events: none;
            background-color: rgba(0, 0, 0, 0.3);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            display: none;
        }
        /* 以下是自定义气泡标注样式 */
        .myPopMarker{
            position: relative;
            bottom:10px;
            width:300px;  /*此处设置自定义标注的宽度*/
            height:150px; /*此处设置自定义标注的高度*/
            padding: 0;
            padding-right: 36px;
            background: #aaa;
            color: #fff;
            border:1px solid #5e5e5e;
        }
        .myPopClose{
            position: absolute;
            top: 0;
            right: 0;
            width: 43px;
            height: 25px;
            text-align: center;
            background-color: honeydew;
            color: #000;
            cursor:pointer;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div class="loading">
    <div class="lodingImg"></div>
</div>
<div id="map-container" style="top: 0px"></div>
<div class="viewmode-group">
    <button id="btn3D" class="btn btn-default"></button>
</div>
<div class="panel panel-default modelInfo">
    <!-- Default panel contents -->
    <div class="panel-heading">地图坐标</div>

    <!-- Table -->
    <table class="table table-striped">
        <thead>
        <tr>
            <th>X:</th>
            <td>0</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>Y:</th>
            <td>0</td>
        </tr>
        </tbody>
    </table>
</div>
<span id="tool-tip"></span>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    人员信息
                </h4>
            </div>
            <div class="modal-body">
                点击关闭按钮检查事件功能。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->

<script src="/esmap/lib/config.js"></script>
<script src="/esmap/lib/esmap-1.6.min.js"></script>
<script src="/esmap/lib/jquery-2.1.4.min.js"></script>
<script src="/esmap/lib/jquery.qrcode.min.js"></script>
<script src="/esmap/lib/tips_controls.js"></script>
<div th:include="include :: footer"></div>
<!--<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script type="text/javascript">
    //定义全局map变量3
    var map;
    var esmapID = getQueryString('id') || defaultOpt.mapID;
    var styleid = getQueryString("styleid") || defaultOpt.themeID;
    var lm;
    var im;
    var center;
    var floorLayer;
    var mapCoord;
    var isDynamicMarker = false;
    var tm;
    var im3;
    var tm2;
    var floorControl;
    var esmapID= '[[${sysEsmap.mapId}]]';
    var token= '[[${sysEsmap.token}]]';
    var mapDataUrl= '';
    var styleid= [[${sysEsmap.themeId}]];
    var mousePos;

    var keepPressed = false;
    var keepPressedObj = null;
    var popMarker1;
    var popMarker2;
    var keepOpen = true;
    var platForm;
    var mousePos;
    var coord;
    window.onload = function () {
        var floorControl;
        var container = document.getElementById('map-container');
        //楼层控制控件配置参数
        var ctlOpt = new esmap.ESControlOptions({
            position: esmap.ESControlPositon.RIGHT_TOP,
            //位置x,y的偏移量
            offset: {
                x: 0,
                y: 0
            },
            imgURL: "/esmap/image/wedgets/"
        });
        //放大、缩小控件配置
        var ctlOpt1 = new esmap.ESControlOptions({
            position: 1, //位置 左上角
            //位置x,y的偏移量
            offset: {
                x: 20,
                y: 80
            }
            , imgURL: "/esmap/image/wedgets/"
        });
        map = new esmap.ESMap({
            container: container,
            mapDataSrc: mapDataUrl,
            mapThemeSrc: defaultOpt.mapThemeUrl,
            themeID: styleid,
            focusAlphaMode: false,
            mapAudioSrc: '/esmap/lib',
            token: token,
            defaultFloornum: 1
        });
        map.openMapById(esmapID); //sceneId
        map.showScaler = true;     //显示地图比例尺
        //添加指南针非常简单，只需要在地图初始化时声明以下属性即可
        map.showCompass = true;     //显示指北针
        map.on('loadComplete', function () {
            var loading = document.getElementsByClassName("loading");
            loading[0].style.display = "none";
            //1.直接设置地图背景
            map.setBackgroundImage('/esmap/image/bg.jpg');
            map.setBackgroundImage(null); //有背景图片时先取消，无背景图片则不需要此代码
            map.setBackgroundColor('#FFFFFF');   //修改背景颜色
            floorLayer = map.getFloor(1);
            center = map.center;
            //创建楼层控件
            floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
            //放大缩小
            var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
            bingEvents();
            for (i=0;i<5;i++){
                randomTag();
            }
        });
        map.on("mapClickNode", function (e) {
            mapCoord = e.hitCoord || null;
            var nodeType = e.nodeType;
            if (nodeType==32){ //当鼠标点击是标签时，打开标签弹出框信息
                // $('#gridSystemModal').show();  //显示弹窗
                // $.modal.alertError("系统错误");$('#identifier').modal('show')
                showPersonInfo();
            }
        })
        //为模型填充div添加点击事件
        container.onclick = bindClick;
        container.ontouchend = bindClick;
        show = function (fid, coord) {
            if (coord != null) {
                var layer = floorLayer.getOrCreateLayerByName('dynamic', 'imageMarker');
                var im = new esmap.ESImageMarker({
                    x: coord.x,
                    y: coord.y,
                    url: '/esmap/image/user.png',
                    spritify: true, //跟随地图缩放变化大小，默认为true，可选参数
                    height: 2,
                    size: 64
                });
                layer.addMarker(im);
                floorLayer.addLayer(layer);
            }
        };
        map.on("mapClickNode", function (e) {
            console.log(e)
            if (e.nodeType == esmap.ESNodeType.IMAGE_MARKER) {
                keepOpen && e.data_.popMarker && e.data_.popMarker.toggle()
            }
        })
        map.on("mapKeepPress", function (e) {
            if(e.ID!=2020)return;
            keepPressed = true;
            map.controls.enablePan = false;
            map.controls.enableRotate = false;
            keepPressedObj = e;
            e.flash && e.flash();
        })
        map.on("update", function () {
            var h = $("#container").height()
            var w = -$("#container").width()
            if (map.mapPicker.curMouse) {
                var screenCoord = {
                    x: map.mapPicker.curMouse.x * h,
                    y: map.mapPicker.curMouse.y * w,
                    z: 0
                }
            }

        })
        map.on("onOver", function (e) {
            if (mousePos&&e.ID==2020) {
                $tooltip = $("#tool-tip")
                $tooltip.html(e.name).css({
                    left: mousePos.x - $tooltip.width() - 20,
                    top: mousePos.y - 25 / 2
                }).show();
            }
        })
        map.on("onLeave", function () {
            $tooltip = $("#tool-tip");
            $tooltip.hide();
        })
        $('#container')[0].onmousemove = function (event) {
            mousePos = {
                x: event.pageX,
                y: event.pageY
            }
            onMove(event)
        }
        //touch 事件需要绑定到内层canvas。否则绑定不成功
        $("#container canvas")[0].ontouchmove = function (event) {
            onMove(event)
        }
        $('#container')[0].onmouseup = function () {
            onUp()
        }
        $('#container canvas')[0].ontouchend = function (e) {
            onUp()
        }

        //清除功能
        var removeAll = function () {
            var re = floorLayer.removeLayersByTypes([esmap.ESLayerType.TEXT_MARKER, esmap.ESLayerType.IMAGE_MARKER]);
            lm && map.removeLocationMarker(lm);
        }

        var b = true;
        var c = true;
        //添加图片加文字标注方法
        function randomTag(){
            // removeAll();
            var layer = new esmap.ESLayer('textMarker');
            layer.name = 'mylayer'
            //添加文本标注，默认样式
            center = map.center;
            // addLocMarker(center.x, center.y, fnum);
            var gpos = center;
            var x;
            var y;
            var  floorLayer1 ;
            if (c){
                floorLayer1 = map.getFloor(1);
                c=false;
            }else {
                floorLayer1 = map.getFloor(2);
                c=true;
            }
            if (b){
               x = gpos.x+(Math.random()*10) ;
               y = gpos.y+(Math.random()*10);
               b=false;
            }else {
                x = gpos.x-(Math.random()*10) ;
                y = gpos.y-(Math.random()*10);
                b=true;
            }
            // var gpos = floorLayer.mapCoord;
            tm2 = new esmap.ESTextMarker({
                x: x,
                y: y,
                name: "测试标签2",
                image: "/esmap/image/user.png",
                imageAlign: "bottom",
                imageSize: 60,
                height: 1,
                showLevel: 20,
                // spritify: false,
                // scale: 0.2,
                fillcolor: "255,0,0", //填充色
                fontsize: "12.0", //字体大小
                strokecolor: "255,255,0" //边框色
            });
            layer.addMarker(tm2);

            floorLayer1.addLayer(layer);
        };
    };
    var bb = true;
    var cc = true;

    function addTagInfo(){
        center = map.center;
        // addLocMarker(center.x, center.y, fnum);
        var gpos = center;
        var x;
        var y;
        var  floorLayer1 ;
        if (cc){
            floorLayer1 = map.getFloor(1);
            cc=false;
        }else {
            floorLayer1 = map.getFloor(2);
            cc=true;
        }
        if (bb){
            x = gpos.x+(Math.random()*10) ;
            y = gpos.y+(Math.random()*10);
            bb=false;
        }else {
            x = gpos.x-(Math.random()*10) ;
            y = gpos.y-(Math.random()*10);
            bb=true;
        }

        var layer = new esmap.ESLayer('imageMarker');
        var gpos = floorLayer.mapCoord;
        im = new esmap.ESImageMarker({
            x: x,
            //设置弹框的y轴
            y: y,
            url: '/esmap/image/user.png',
            size: 64,
            height: 3,
            id: 2020,
            name: '长按拖动，点击显示气泡标注'
        });
        layer.addMarker(im);
        // x: gpos.x+10,
        // 	y: gpos.y+20,
        floorLayer1.addLayer(layer);

        var layer2 = new esmap.ESLayer('textMarker');
        layer2.name = 'textmarkers'
        //添加文本标注，默认样式
        tm = new esmap.ESTextMarker({
            x: x,
            //设置弹框的y轴
            y: y,
            name: "官方网站",
            image: "/esmap/image/user.png",
            imageAlign: "bottom",
            imageSize: 60,
            height: 3,
            showLevel: 23,
            fillcolor: "255,0,0", //填充色
            fontsize: "12.0", //字体大小
            strokecolor: "255,255,0" //边框色
        });
        layer2.addMarker(tm);
        floorLayer1.addLayer(layer2);

        // //添加信息窗
        // popMarker1 = new esmap.ESPopMarker({
        //     mapCoord: {
        //         //设置弹框的x轴
        //         x: x,
        //         //设置弹框的y轴
        //         y: y,
        //         height: 40, //控制信息窗的高度
        //         //设置弹框位于的楼层
        //         fnum: 1
        //     },
        //     //设置弹框的宽度(如果是自定义标注,宽高则在css里设置)
        //     width: 250,
        //     //设置弹框的高度
        //     height:100,
        //     marker:tm,    //此处绑定marker对象(保持与marker相对高度一致)
        //     //设置弹框的内容
        //     content: '<a target="_bank" href="http://www.esmap.cn">易景空间地图官方网站</a>',
        //     closeCallBack: function () {
        //         //信息窗点击关闭操作
        //         // alert('信息窗关闭了！');
        //     },
        //     created: function () {}
        // });
        //添加信息窗
        popMarker2 = new esmap.ESPopMarker({
            mapCoord: {
                //设置弹框的x轴
                x: x,
                //设置弹框的y轴
                y: y,
                height:20, //调整高度
                //设置弹框位于的楼层
                fnum: 1
            },
            className:"myPopMarker",  //自定义popMarker样式。在css里配置
            // 注意!自定义气泡标注的宽高(width/height)不在此设置,全部在css里对应的class定义!
            marker:im,    //此处绑定marker对象,保持相对高度一致
            //设置弹框的内容
            content: '<h3>自定义样式popMarker</h3><p>点击下方图片标注切换显示隐藏；长按图片标注可以拖动</p><div class="myPopClose">关闭</div>',
            closeCallBack: function () {
                //信息窗点击关闭操作
                // alert('信息窗关闭了！');
            },
            created: function (e) {
                //创建完成钩子
                $(".myPopClose").click(function(){
                    //关闭删除
                    popMarker2.close();
                    //为自定义关闭按钮绑定隐藏事件
                    //popMarker.hide();
                })
            }
        });
        im.data_.popMarker = popMarker2;
    }

    function bindClick() {
        var fnum = map.focusFloorNum;
        var posInfo = document.querySelectorAll(".panel td");
        if (mapCoord) {
            posInfo[0].innerText = mapCoord.x;
            posInfo[1].innerText = mapCoord.y;
            if (isDynamicMarker)
                show(fnum, mapCoord);
        }
    }
    //添加定位标注方法,x、y为墨卡托坐标, fnum为楼层floornum(第几楼),angle为旋转角度
    function addLocMarker(x, y, fnum) {
        lm = new esmap.ESLocationMarker({
            url: '/esmap/image/pointer.png',
            size: 150,
            height: 30
        });
        map.addLocationMarker(lm);
        lm.setPosition({
            x: x,
            y: y,
            fnum: fnum,
            height: 1
        })
        //locMarker.direction = angle;  //改变定位标注的方向 ，或者使用rotateTo()方法
    }
    function bingEvents() {
        document.getElementById('btn3D').onclick = function () {
            if (map.viewMode == esmap.ESViewMode.MODE_2D) {
                map.viewMode = esmap.ESViewMode.MODE_3D; //2D-->3D
                document.getElementById('btn3D').style.backgroundImage = "url('/esmap/image/wedgets/3D.png')";
            } else {
                map.viewMode = esmap.ESViewMode.MODE_2D; //3D-->2D
                document.getElementById('btn3D').style.backgroundImage = "url('/esmap/image/wedgets/2D.png')";
            }
        }
    }
    function getRandFloor() {
        var len = map.floorNums.length;
        var cur = map.focusFloorNum;
        var randFloor = Math.floor(Math.random() * len) + 1;
        while (randFloor == cur)
            randFloor = Math.floor(Math.random() * len) + 1;
        return randFloor
    }
    function onMove(event) {
        if (keepPressed) {
            var fnum = map.focusFloorNum;
            //获取地图视图的边框
            var mapbox = document.getElementById('container');
            var box = mapbox.getBoundingClientRect();
            var screenCoord = {
                x: (event.clientX || event.changedTouches[0].clientX) - box.left,
                y: (event.clientY || event.changedTouches[0].clientY) - box.top,
                z: map.getFloor(fnum).floorHeight + map.layerLocalHeight
            }
            var mapCoord = map.coordScreenToMap(screenCoord.x, screenCoord.y, screenCoord.z);
            if (keepPressedObj && keepPressedObj.moveTo) {
                var moveToPos = {
                    x: mapCoord.x,
                    y: mapCoord.y,
                    time: 0
                }
                keepPressedObj.moveTo(moveToPos)

                if (popMarker2) {
                    popMarker2.moveTo(moveToPos)
                }
            }
            keepOpen = false;
        }
    }

    function onUp() {
        keepPressed = false;
        map.controls.enablePan = true;
        map.controls.enableRotate = true;
        keepPressedObj = null;
        keepOpen = true;
    }
    function showPersonInfo(){
        $('#myModal').modal('show');
    }
</script>
</body>

</html>